<template>
  <div class="navList">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane v-for = "item in navList" :key="item.id">
        <div slot="tab" @click="toHome(item.cid, item.id)">
          <p>
            {{item.pname}}
          </p>
          <p>
            {{item.english_name}}
          </p>
        </div>
        <div class="tabContain">
          <home v-if="item.id === 0" :navListId="navListId" @getcartsNumber="getNavList"></home>
          <home-text v-if="item.id === 1" :navListId="navListId"></home-text>
          <mobile-phone v-if="item.id === 2" :navListId="navListId"></mobile-phone>
          <exquisite-bags v-if="item.id === 3" :navListId="navListId"></exquisite-bags>
          <selected-clothing v-if="item.id === 4" :navListId="navListId"></selected-clothing>
          <electrical-equipment v-if="item.id === 5" :navListId="navListId"></electrical-equipment>
          <beauty-care v-if="item.id === 6" :navListId="navListId"></beauty-care>
          <general-merchandise v-if="item.id === 7" :navListId="navListId"></general-merchandise>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import api from '../../api/api'
import home from '../../components/goodList/goodList'
import HomeText from '../../components/mobile/index'
import MobilePhone from '../../components/homeTextiles/index'
import ExquisiteBags from '../../components/bags/index'
import SelectedClothing from '../../components/clothing/index'
import ElectricalEquipment from '../../components/equipment/index'
import BeautyCare from '../../components/care/index'
import GeneralMerchandise from '../../components/merchandise/index'
import Event from '@/assets/js/event'
export default {
  name: 'navList',
  components: {
    home,
    HomeText,
    MobilePhone,
    ExquisiteBags,
    SelectedClothing,
    ElectricalEquipment,
    BeautyCare,
    GeneralMerchandise
  },
  data () {
    return {
      navList: [],
      navListId: '',
      images: null
    }
  },
  created () {
    this.getNavList()
  },
  mounted () {
    Event.$on('getCart', () => {
      this.getNavList()
    })
  },
  beforeDestroy () {
    Event.$off('getCart', () => {
      this.getNavList()
    })
  },
  methods: {
    callback (key) {
    },
    getNavList () {
      const params = {
        module: 'app_pc',
        action: 'index',
        m: 'index',
        access_id: localStorage.getItem('token'),
        language: null
      }
      api.postFormAPI(params).then(res => {
        if (res.status === 200) {
          // 数据处理
          const cartList = res.data.data
          this.$store.commit('getCartList', cartList)
          this.$store.commit('setLoginStatus', cartList.login_status)
          const title_ = {
            cid: '1',
            english_name: 'HOME',
            pname: '首页'
          }
          const listData = res.data.data.class_list.splice(0, 7)
          listData.unshift(title_)
          for (let i = 0; i < listData.length; i++) {
            listData[i].id = i // 给每一项新增一个id属性值
          }
          this.navList = listData
          // console.log(this.navList)
        }
      }).catch(err => console.log(err))
    },
    toHome (id, key) {
      this.navListId = id
      this.$store.commit('setActiveKey', key)
      this.$store.commit('sendKeyword', null)
      switch (key) {
        case 0:
          this.$store.commit('changePage', 'HomeList')
          this.$store.commit('sendBreadcrumbTitle', '首页')
          break
        case 1:
          Event.$emit('toHomeTextiles', 'HomeText')
          this.$store.commit('sendBreadcrumbTitle', '5G手机')
          break
        case 2:
          Event.$emit('toMobilePage', 'MobilePhone')
          this.$store.commit('sendBreadcrumbTitle', '家居家纺')
          break
        case 3:
          Event.$emit('toExquisiteBags', 'ExquisiteBags')
          this.$store.commit('sendBreadcrumbTitle', '精美箱包')
          break
        case 4:
          Event.$emit('toSelectedClothing', 'SelectedClothing')
          this.$store.commit('sendBreadcrumbTitle', '流行服饰')
          break
        case 5:
          Event.$emit('toElectricalEquipment', 'ElectricalEquipment')
          this.$store.commit('sendBreadcrumbTitle', '家用电器')
          break
        case 6:
          Event.$emit('toBeautyCare', 'BeautyCare')
          this.$store.commit('sendBreadcrumbTitle', '美妆护理')
          break
        case 7:
          Event.$emit('toGeneralMerchandise', 'GeneralMerchandise')
          this.$store.commit('sendBreadcrumbTitle', '日用百货')
          break
      }
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .ant-tabs-top-bar {
  display: flex;
  justify-content: center;
}
  .navList {
    max-width: 100%;
    min-width: 660px;
    margin: 0 auto;
    margin-top: 35px;
    .tabContain {
      width: 100%!important;
      min-height: calc( 100vh - 580px );
      padding: -20px 0px 0px 0px!important;
    }
    /*.tab-p {*/
      p {
        text-align: center;
        &:nth-child(1) {
          font-size: 16px;
          font-weight: bold;
          line-height: 16px;
          margin-bottom: 1px;
          /*color: #020202;*/
        }
      }
    /*}*/

  }
</style>
